#直線ラジアル軸

線形放射状スケールは、数値データをグラフ化するために使用されます。名前が示すように、線形補間は、軸の中心に対する値の位置を決定するために使用されます。

ラジアル リニア スケールでは、次の追加構成オプションが提供されます。

#構成オプション

#リニアラジアル軸固有のオプション

名前空間:options.scales[scaleId]

名前 タイプ デフォルト 説明
animate boolean true グラフの中心からの拡大縮小をアニメーション化するかどうか
angleLines object アングルライン構成。もっと...
beginAtZero boolean false true の場合、スケールにはまだ含まれていない場合は 0 が含まれます。
pointLabels object ポイントラベルの構成。もっと...
startAngle number 0 スケールの開始角度。度では 0 が頂点になります。

#全軸共通オプション

名前空間:options.scales[scaleId]

名前 タイプ デフォルト 説明
type string 使用されているスケールの種類。カスタム スケールを作成し、文字列キーを使用して登録できます。これにより、グラフの軸のタイプを変更できます。
alignToPixels boolean false ピクセル値をデバイスのピクセルに合わせます。
backgroundColor Color スケール領域の背景色。
display boolean|string true 軸のグローバル可視性を制御します (次の場合に表示されます)。true、いつ隠されるかfalse)。いつdisplay: 'auto'、軸は、少なくとも 1 つの関連データセットが表示されている場合にのみ表示されます。
grid object グリッドラインの構成。もっと...
min number ユーザー定義のスケールの最小値。データの最小値をオーバーライドします。もっと...
max number ユーザー定義のスケールの最大値。データの最大値をオーバーライドします。もっと...
reverse boolean false スケールを逆にします。
stacked boolean|string false データをスタックする必要があります。もっと...
suggestedMax number データの最大値を計算するときに使用される調整。もっと...
suggestedMin number 最小データ値を計算するときに使用される調整。もっと...
ticks object 設定にチェックマークを付けます。もっと...
weight number 0 軸のソートに使用される重み。重みが大きいほど、チャート領域から遠くなります。

#ティック設定

#線形半径軸固有のティック オプション

名前空間:options.scales[scaleId].ticks

名前 タイプ スクリプト可能 デフォルト 説明
count number はい undefined 生成するティックの数。指定した場合、これは自動生成をオーバーライドします。
format object はい Intl.NumberFormat (新しいウィンドウが開きます)デフォルトのラベルフォーマッタで使用されるオプション
maxTicksLimit number はい 11 表示する目盛りとグリッド線の最大数。
precision number はい 定義されていれば、stepSizeが指定されていない場合、ステップ サイズはこの小数点以下の桁数に四捨五入されます。
stepSize number はい ユーザー定義のスケールの固定ステップ サイズ。もっと...

#すべての軸に共通の目盛オプション

名前空間:options.scales[scaleId].ticks

名前 タイプ スクリプト可能 デフォルト 説明
backdropColor Color はい 'rgba(255, 255, 255, 0.75)' ラベルの背景の色。
backdropPadding Padding 2 ラベルの背景のパディング。
callback function チャート上に表示されるティック値の文字列表現を返します。見る折り返し電話
display boolean true true の場合、目盛りラベルを表示します。
color Color はい Chart.defaults.color ダニの色。
font 17177dd6-0お父さん-47be-8b2c-ffd18236d32d はい Chart.defaults.font 見るフォント
major object {} メジャーティックの設定
padding number 3 軸からの目盛りラベルのオフセットを設定します。
showLabelBackdrop boolean はい true放射状スケールの場合、falseさもないと true の場合、目盛ラベルの後ろに背景を描画します。
textStrokeColor Color はい 「」 テキストの周囲のストロークの色。
textStrokeWidth number はい 0 テキストの周囲のストロークの幅。
z number 0 目盛りレイヤーの Z インデックス。チャート領域に目盛りを描画する場合に便利です。値 <= 0 はデータセットの下に描画され、値 > 0 は上に描画されます。

スクリプト可能なコンテキストについては、以下で説明します。オプションセクション。

#グリッドラインの設定

名前空間:options.scales[scaleId].grid、軸のグリッド線のオプションを定義します。

名前 タイプ スクリプト可能 インデックス可能 デフォルト 説明
borderDash number[] [] グリッド線のダッシュの長さと間隔。見るMDN (新しいウィンドウが開きます)
borderDashOffset number はい 0.0 破線のオフセット。見るMDN (新しいウィンドウが開きます)
circular boolean false true の場合、グリッド線は円形になります (レーダーおよび極面図のみ)。
color Color はい はい Chart.defaults.borderColor グリッド線の色。配列として指定した場合、最初の色は最初のグリッド ラインに適用され、2 番目の色は 2 番目のグリッド ラインに適用されます。
display boolean true false の場合、この軸のグリッド線を表示しません。
lineWidth number はい はい 1 グリッド線のストローク幅。

スクリプト可能なコンテキストについては、以下で説明します。オプションセクション。

#軸範囲の設定

軸範囲設定の数を考慮すると、それらすべてがどのように相互作用するかを理解することが重要です。

suggestedMaxsuggestedMin設定は、軸のスケールに使用されるデータ値のみを変更します。これらは、自動フィット動作を維持しながら軸の範囲を拡張するのに役立ちます。

let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);

この例では、正の最大値は 50 ですが、データの最大値は 100 まで拡張されます。ただし、最小データ値は 100 を下回っているため、suggestedMin設定しても無視されます。

let chart = new Chart(ctx, {
    type: 'radar',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            r: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }
    }
});

とは対照的に、suggested*設定、minmax設定により、軸に明示的な終端が設定されます。これらを設定すると、一部のデータ ポイントが表示されなくなる場合があります。

#刻み幅

設定されている場合、スケール ティックは次の倍数で列挙されます。stepSize、増分ごとに 1 ティックになります。設定されていない場合、ティックには Nice Number アルゴリズムを使用して自動的にラベルが付けられます。

この例では、目盛りを作成する y 軸を持つグラフを設定します。0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5

let options = {
    scales: {
        r: {
            max: 5,
            min: 0,
            ticks: {
                stepSize: 0.5
            }
        }
    }
};

#角度線のオプション

次のオプションは、チャートの中心からポイント ラベルまで放射状に伸びる斜めの線を構成するために使用されます。 名前空間:options.scales[scaleId].angleLines

名前 タイプ スクリプト可能 デフォルト 説明
display boolean true true の場合、角度の線が表示されます。
9963d54c-ac7a-4659-97a8-3647011962月 Color はい Chart.defaults.borderColor 斜めの線の色。
lineWidth number はい 1 斜めの線の幅。
borderDash number[] はい1 [] 斜めの線のダッシュの長さと間隔。見るMDN (新しいウィンドウが開きます)
borderDashOffset number はい 0.0 破線のオフセット。見るMDN (新しいウィンドウが開きます)
  1. borderDash設定は静的な値または関数のみを受け入れます。配列の配列を渡すことはサポートされていません。

スクリプト可能なコンテキストについては、以下で説明します。オプションセクション。

#ポイントラベルのオプション

次のオプションは、スケールの周囲に表示されるポイント ラベルを構成するために使用されます。 名前空間:options.scales[scaleId].pointLabels

名前 タイプ スクリプト可能 デフォルト 説明
backdropColor Color true undefined ポイントラベルの背景色。
backdropPadding Padding 2 ラベルの背景のパディング。
borderRadius number|object true 0 ポイントラベルの境界半径
display boolean|string true true の場合、ポイント ラベルが表示されます。いつdisplay: 'auto'、別のラベルと重なる場合、ラベルは非表示になります。
callback function データラベルをポイントラベルに変換するコールバック関数。デフォルトの実装は単に現在の文字列を返します。
color Color はい Chart.defaults.color ラベルの色。
font Font はい Chart.defaults.font 見るフォント
245fe871-2fc9-4a61-b422-b03d91​​482acf number はい 5 チャートとポイントのラベルの間のパディング。
centerPointLabels boolean false true の場合、ポイント ラベルは中央に配置されます。

スクリプト可能なコンテキストについては、以下で説明します。オプションセクション。

#内部データ形式

内部的には、リニアラジアルスケールは数値データを使用します。

最終更新: 2023 年 4 月 28 日、午前 5 時 18 分 20 秒